<!-- eslint-disable no-console -->
<script lang="ts" setup>
import type { DictApi, QctemplateApi } from '#/api';

import { reactive, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { InputSearch } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { addQctemplateproduct, updateQctemplateproduct } from '#/api';
import { getUnitmeasureAll } from '#/api/mes/md/unitmeasure';
import materialproductmodal from '#/utils/view/material/materialproductmodal.vue';

const emit = defineEmits(['success']);

const measureAll = reactive<DictApi.SelectOption[]>([]);
getUnitmeasureAll().then((res) => {
  res.data.forEach((item) => {
    measureAll.push({
      label: item.measureName,
      value: item.measureCode,
    });
  });
});

const formdata = ref<QctemplateApi.Row2>();
const [Modal, modalApi] = useVbenModal({
  closeOnClickModal: false,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const data = modalApi.getData();
      console.log(data);

      if (data) {
        formdata.value = data as QctemplateApi.Row2;
        searchValue.value = formdata.value.itemCode;
        baseFormApi.setValues(formdata.value as any);
      }
    }
  },
  async onConfirm() {
    const { valid } = await baseFormApi.validate();
    if (valid) {
      modalApi.lock();
      let data: QctemplateApi.Row2;
      await baseFormApi.getValues().then((res) => {
        console.log(res);
        data = res as QctemplateApi.Row2;
      });
      try {
        await (formdata.value?.recordId
          ? updateQctemplateproduct(data!)
          : addQctemplateproduct(data!));
        emit('success', formdata.value?.recordId ? '修改成功' : '新增成功');
        modalApi.close();
      } finally {
        modalApi.lock(false);
      }
    }
  },
});

// const switchValue = ref('');
const [BaseForm, baseFormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  showDefaultActions: false,
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      rules: 'required',
      dependencies: {
        show: false,
        triggerFields: ['templateId'],
      },
      fieldName: 'itemId',
      label: 'itemId',
    },
    {
      component: 'Input',
      rules: 'required',
      dependencies: {
        show: false,
        triggerFields: ['templateId'],
      },
      fieldName: 'templateId',
      label: 'templateId',
    },
    {
      component: 'Input',
      rules: 'required',
      dependencies: {
        show: false,
        triggerFields: ['templateId'],
      },
      fieldName: 'recordId',
      label: 'recordId',
    },
    {
      component: '',
      rules: 'required',
      disabled: true,
      componentProps: {
        placeholder: '请输入产品物料编码',
      },
      fieldName: 'itemCode',
      label: '产品物料编码',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Input',
      componentProps: {
        readonly: true,
      },
      fieldName: 'itemName',
      label: '产品物料名称',
      formItemClass: 'col-span-6',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入内容',
        readonly: true,
      },
      fieldName: 'specification',
      label: '规格型号',
      formItemClass: 'col-span-12',
    },
    {
      component: 'ElInputNumber',
      componentProps: {
        min: 0,
      },
      fieldName: 'quantityCheck',
      defaultValue: 0,
      label: '最低检测数',
      formItemClass: 'col-span-4',
    },
    {
      component: 'ElInputNumber',
      componentProps: {
        min: 0,
      },
      fieldName: 'quantityUnqualified',
      defaultValue: 0,
      label: '最大不合格数',
      formItemClass: 'col-span-4',
    },
    {
      component: 'Input',
      componentProps: {
        readonly: true,
      },
      fieldName: 'unitName',
      label: '单位',
      formItemClass: 'col-span-4',
    },
    {
      component: 'Input',
      dependencies: {
        show: false,
        triggerFields: ['templateId'],
      },
      fieldName: 'unitOfMeasure',
      label: '单位描述',
      formItemClass: 'col-span-4',
    },
    {
      component: 'ElInputNumber',
      componentProps: {
        min: 0,
      },
      fieldName: 'crRate',
      label: '最大致命缺陷率',
      defaultValue: 0,
      formItemClass: 'col-span-4',
    },
    {
      component: 'ElInputNumber',
      componentProps: {
        min: 0,
      },
      fieldName: 'majRate',
      label: '最大严重缺陷率',
      defaultValue: 0,

      formItemClass: 'col-span-4',
    },
    {
      component: 'ElInputNumber',
      componentProps: {
        min: 0,
      },
      fieldName: 'minRate',
      label: '最大轻微缺陷率',
      defaultValue: 100,
      formItemClass: 'col-span-4',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入内容',
      },
      formItemClass: 'col-span-12',
      fieldName: 'remark',
      label: '备注',
    },
  ],
  wrapperClass: 'grid grid-cols-12',
});

const searchValue = ref('');
const [searchModal, searchModalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: materialproductmodal,
  destroyOnClose: true,
  onClosed() {
    searchValue.value = searchModalApi.getData().itemCode;
    console.log(searchModalApi.getData());
    baseFormApi.setFieldValue('itemId', searchModalApi.getData().itemId);
    baseFormApi.setFieldValue('itemName', searchModalApi.getData().itemName);
    baseFormApi.setFieldValue('itemCode', searchModalApi.getData().itemCode);
    baseFormApi.setFieldValue(
      'specification',
      searchModalApi.getData().specification,
    );
    baseFormApi.setFieldValue('unitName', searchModalApi.getData().unitName);
    baseFormApi.setFieldValue(
      'unitOfMeasure',
      searchModalApi.getData().unitOfMeasure,
    );
  },
});

function onSubmit(values: Record<string, any>) {
  console.log(values);

  modalApi.close();
}
</script>
<template>
  <Modal class="w-2/3">
    <searchModal />
    <BaseForm>
      <template #itemCode>
        <InputSearch
          placeholder="请输入产品物料编码"
          @search="searchModalApi.open()"
          v-model:value="searchValue"
        />
      </template>
    </BaseForm>
  </Modal>
</template>
